<template>
	<view class="container">
		<!-- 头部 -->
		<view class="top">
			<text class="nowcity" @click="toChooseCity">{{now_city}}</text>
			<navigator class="searchbox" url="../search/search">
				<image src="../../static/assets/search.png" mode=""></image>
				<input type="text" value="" placeholder="请输入区域/小区,搜索房源" />
			</navigator>
			<image src="../../static/assets/person2.png" mode=""></image>
		</view>
		<!-- 分类下拉插件  子组件传值给父组件 --> 
		<dropdown-screen @finish="obj"></dropdown-screen>
		<!-- {{myobj}} -->
		<!-- 分类栏 -->
		<view class="sortlist">
			<block v-for="(item,index) in proplist" v-bind:key="item.id">
				<!--  @click="chooseProp(item.text,index)" -->
				<text :class="['sortitem',{'active':currentProp==index}]" @click="chooseProp(item.text,index)">{{item.text}}</text>
			</block>
		</view>
		<!-- 选中列表 -->
		<view  class="houselist" v-if="isSearch">
			<block v-for="item in resultList" v-bind:key="item.house_id">
				<navigator class="listitem" :url="'../houseDetail/houseDetail?id='+encodeURIComponent(item.house_id)">
					<view class="pic">
						<image :src="item.house_main_image" mode=""></image>
					</view>
					<view class="content">
						<text class="title">{{item.house_title}}</text>
						<text class="desc">{{item.area_direction}}</text>
						<view class="area">
							<image src="../../static/assets/location.png" mode=""></image>
							<text class="area">{{item.house_address_desc}}</text>
						</view>
						<view class="tagsbox">
							<view class="tags">
							<block v-for="items in item.house_tags">
								<text class="tagitem">{{items}}</text>
							</block>
						</view>
						</view>
						<text class="price">￥{{item.month_rent}}</text>
					</view>
				</navigator>
			</block>
		</view>
		<!-- 没有搜索到 -->
		<text class="nothing" v-if="isNothing">没有搜索到结果</text>
	</view>
</template>

<script>
	import store from "../../store/index.js";
	import {cityHouseList} from "../../data/cityhouses.js";
	import dropdownScreen from "../../components/dropdown-screen/dropdown-screen.vue"
	export default {
		components:{
			dropdownScreen
		},
		computed:{
			now_city(){
				return store.state.nowCity
			},
			get_chosenProp(){
				return store.state.chosenProp
			}
		},
		watch:{
			// 'get_chosenProp':{
			// 	handler:(newval)=>{
			// 		console.log(123,newval);
			// 		// this.filter();
			// 	},
			// 	// immediate:true,
			// 	deep:true,
			// }
			'myobj':{
				handler:(newval)=>{
					console.log('侦听myobj变化',newval);
				},
				deep:true,
			}
		},
		data() {
			return {
				myobj:{
					money:"租金",
					way:"整租",
					props:'近地铁'
				},
				isSearch:false,
				isNothing:false,//显示没有分类结果
				houseList: [],//获取到对应城市的房源数据
				proplist:[
					{text:'朝南',id:0},
					{text:'非一楼',id:1},
					{text:'带阳台',id:2},
					{text:'电梯房',id:3}
				],
				currentProp:-1,//记录现在选中的属性的下标
				resultList:[],//搜索结果列表 渲染页面
			}
		},
		methods: {
			toChooseCity(){
				// 跳转切换不出现在tabBar的链接地址 选择城市
				uni.navigateTo({
					url:'../choosecity/choosecity',
					animationType:'slide-in-right',
					animationDuration:3000
				})
			},
			// 得到城市房源列表
			getCity(){
				// console.log(this.$store.state.nowCity);
				let nowcity=this.$store.state.nowCity;
				if(nowcity=='北京'){
					this.citycode=1;
				}
				else if(nowcity=='广州'){
					this.citycode=0;
				}
				else if(nowcity=='杭州'){
					this.citycode=2;
				}
				else if(nowcity=='南京'){
					this.citycode=3;
				}
				// console.log(this.citycode);
				// console.log(cityHouseList[this.citycode])
				// 对应城市的房源列表
				this.houseList=cityHouseList[this.citycode].houselist;
				// console.log(this.houseList);
				this.resultList=this.houseList;
			},
			// 点击选择属性
			chooseProp(prop,index){
				this.currentProp=index;
				this.filter();
				// console.log(222,this.resultList);
				// console.log(this.$store.state.chosenProp2);
				// console.log(this.resultList===this.$store.state.chosenProp2)
				let sortlist=[];//重新声明一个变量
				let temp=-1;
				this.resultList.forEach((item,index)=>{
					// 1.判断朝南
					if(item.house_tags.indexOf(prop)>-1){
						// console.log(item);
						// console.log('ooooooo');
						temp=index;
						sortlist.push(this.resultList[temp]);
						// console.log(sortlist)
					}
					// 2.判断租金月付
					// else if(prop=='租金月付'&&item.is_monthly_pay==1){
					// 	temp=index;
					// 	sortlist.push(this.houseList[temp]);
					// }
				})
				// console.log(555,sortlist);
				this.resultList=sortlist;
				sortlist.forEach((item,index)=>{
					// console.log(item.house_tags,item.house_title)
				})
				if(this.resultList.length==0){
					this.isNothing=true;
					this.isSearch=false;
				}
				else{
					this.isNothing=false;
					this.isSearch=true;
				}
			},
			// 根据筛选渲染数据
			filter(){
				// let a='';
				// let b=['1','2','3'];
				// console.log(b.indexOf(a));//-1
				console.log()
				// console.log('1111',this.myobj);
				// 判断租房方式
				let hire_way;
				if(this.myobj.way=='不限'){
					hire_way=''
				}
				else{
					hire_way=this.myobj.way;
				}
				// 判断租金
				let hire_rent;
				let min_price;
				let max_price;
				if(this.myobj.money=='租金'||this.myobj.money=='不限'){
					hire_rent=['0','20000'];
				}
				else if(this.myobj.money=='1500以下'){
					hire_rent=['0','1500'];
				}
				else{
					hire_rent=this.myobj.money.slice(0,9).split('-');
				}
				// console.log(hire_rent)
				min_price=hire_rent[0];
				max_price=hire_rent[1];
				// console.log(min_price,max_price);
				// 判断更多选择
				let hire_prop;
				if(this.myobj.props=='更多'){
					hire_prop='近地铁'
				}
				else{
					hire_prop=this.myobj.props;
				}
				let temp=-1;
				let filterlist=[];
				// console.log(this.houseList)
				this.houseList.forEach((item,index)=>{
					// console.log(item)
					if(item.house_title.indexOf(hire_way)>-1){
						if(item.month_rent>min_price && item.month_rent<max_price){
							if(item.house_tags.indexOf(hire_prop)>-1){
								temp=index;
								filterlist.push(this.houseList[temp]);
							}
						}
					}
				})
				// console.log(123,filterlist);
				// if(filterlist.length!=0){
				// 	filterlist.forEach((item,index)=>{
				// 		console.log(item.house_title,item.month_rent);
				// 	})
				// }
				this.resultList=filterlist;
				this.$store.commit('setChosenProp2',this.resultList);
				if(this.resultList.length==0){
					this.isNothing=true;
					this.isSearch=false;
				}
				else{
					this.isNothing=false;
					this.isSearch=true;
				}
			},
			// 接收子组件下拉框传来的数据
			obj(res){
				// console.log(res)
				if(res.$index == 1){//租金
					this.myobj.money = res.text
					
				}else if(res.$index == 2){//方式
					this.myobj.way = res.text
				}
				else if(res.$index == 3){//特点
					this.myobj.props=res.text;
				}
				this.filter();//执行过滤属性的函数
			},
		},
		onShow(){
			let getsortObj=this.$store.state.tosortObj;
			if(getsortObj){
				console.log(getsortObj)
				this.myobj=getsortObj;
			}
			this.filter();
			if(this.resultList.length==0){
				this.isNothing=true;
				this.isSearch=false;
			}
			else{
				this.isNothing=false;
				this.isSearch=true;
			}
			// this.chooseProp('租金月付',0)
			
		},
		onLoad(){
			// console.log(this.$store.state.tosortObj);
			// this.myobj=this.$store.state.tosortObj;
			this.getCity();
			// this.filter();
		}
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	color:#464547 ;
	// 头部
	.top{
		width: 100%;
		padding: 50rpx 0 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #6A6DA9;
		color: #FFFFFF;
		.nowcity{
			display: block;
			width: 15%;
			text-align: center;
		}
		.searchbox{
			width:65%;
			margin: 0 auto;
			// margin-left: 30rpx;
			height: 80rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			border-radius: 10rpx;
			image{
				width: 40rpx;
				height:40rpx;
				margin-left: 20rpx;
			}
			input{
				display: block;
				width: 90%;
				margin-left: 10rpx;
			}
		}
		>image{
			display: block;
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}
	// 插件
	// 分类选项
	.sortlist{
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.sortitem{
			display: block;
			padding: 0.2rem 0.5rem;
			border-radius: 20rpx;
			background-color: #eeeeef;
		}
		.active{
			background-color:#585eaa ;
			color: #FFFFFF;
		}
	}
	// 列表
	.houselist{
		width: 93%;
		margin: 0 auto;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.listitem{
			width: 100%;
			/* height: 210rpx; */
			margin-bottom: 25rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #dddddd;
			.pic{
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-left: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				width: 65%;
				/* height: 210rpx; */
				/* background-color: #eeeeee; */
				display: flex;
				flex-direction: column;
				color: #464547;
				text{
					display: block;
					margin-left: 10rpx;
					padding: 0.1rem 0;
					&:nth-child(2){
						font-size: 0.6rem;
					}
				}
				.area{
					margin-left: 10rpx;
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					text{
						font-size: 0.6rem;
						display: block;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.tagsbox{
					width: 100%;
					margin-left: 10rpx;
					margin-top: 10rpx;
					// border: 2px solid #dddddd;
					overflow: scroll;
					.tags{
						width: 180%;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						.tagitem{
							display: block;
							padding: 0.1rem 0.15rem;
							background-color: #eeeeee;
							font-size: 0.6rem;
						}
					}
					&::-webkit-scrollbar{//隐藏滚动条
						width: 0;
						height: 0;
						background-color: transparent;
					}
				}
				.price{
					color: #585eaa;
					font-weight: bold;
				}
			}
		}
	}
	.nothing{
		display: block;
		width: 100%;
		margin-top: 200rpx;
		text-align: center;
	}
}
</style>
